<template>
    <el-dialog @open="open" v-model="props.isOpen" :title="props.openType=='add'?'添加用户':'修改用户'" @close="close" style="width: 30%">
            <el-form ref="userForm" :rules="rules" :model="form" label-width="100px" align="center">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="form.gender" placeholder="请选择性别">
                        <MySelectOption typeCode = "gender"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="form.nickName" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" type="textarea" resize="none" />
                </el-form-item>
                <el-form-item  label="选择机构" prop="orgName">
                    <el-tree-select
                            v-model="orgName"
                            :data="allOrgs"
                            check-strictly
                            :render-after-expand="false"
                            @node-click="handleNodeClick"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button v-show='props.type=="add"' type="primary" plain  @click="addUser">添加</el-button>
                    <el-button v-show="props.type=='edit'" type="primary" plain  @click="updateUser">更新</el-button>
                    <el-button @click="close" type="primary" plain >取消</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script setup>
    import {ref,reactive,defineProps} from 'vue'
    import MySelectOption from '@/components/common/MySelectOption.vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'

    let userForm = ref(null)
    const emits = defineEmits(['close','reload'])
    const rules = reactive({
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' },],
        gender: [{required: true,message: '请选择性别', trigger: 'blur'},],
        nickName: [{required: true,message: '请输入昵称', trigger: 'blur'},],
        address: [{required: true,message: '请输入地址', trigger: 'blur'},],
        orgName: [{required: true,message: '请选择机构', trigger: 'blur'},],
    })
    let props = defineProps(['isOpen','openType','id'])
    let allOrgs = reactive([])
    let orgName = ref()
    let showDialog = ref(false)
    let form = reactive({})

    function open() {
        if(props.isOpen == true){
            if(allOrgs.length === 0){
                request.get(`/api/common/getAllOrgTrees`).then(resp => {
                    allOrgs.push(...resp)
                })
            }
            if(props.openType==='edit'){
                request.get(`/api/user/getUser/${props.id}`).then(resp => {
                    for(let key in resp){
                         form[key] = resp[key]
                    }
                    orgName.value = form['orgName']
                })
            }else if(props.openType==="add"){
                for(let key in form){
                    delete form[key]
                }
             }
          }
    }

    function close(){
        emits('close')
        userForm.value.resetFields()//重置表单校验
    }

    function addUser(){
        userForm.value.validate((valid, fields)=>{
            if(valid) {
                request.post("/api/user/add", form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '添加成功！', type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateUser(){
        userForm.value.validate((valid, fields)=>{
            if(valid) {
                request.post("/api/user/update",form).then(resp => {
                    close()
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function handleNodeClick (node){
        form.orgId = node.value
        form.orgName = node.label
    }
</script>

<style scoped>

</style>